<template>
    <div id="audit_details">
        <div class="container">
            <div class="wrapper">
                <p class="title">审核界面</p>
                <el-form :inline="true" :model="form" :rules="rules">
                    <el-form-item label="名称:" class="v-form-item">
                        <el-input disabled v-model="form.name" placeholder="" class="handle-input mr10"></el-input>
                    </el-form-item>

                    <el-form-item label="申请类型:" class="v-form-item" prop="applyType">
                        <el-select
                            :clearable="true"
                            disabled
                            v-model="form.applyType"
                            placeholder="请选择申请类型"
                            class="handle-select mr10"
                        >
                            <el-option key="1" label="常规上线" :value="1"></el-option>
                            <el-option key="2" label="加急上线" :value="2"></el-option>
                            <el-option key="3" label="常规下线" :value="3"></el-option>
                            <!-- <el-option key="4" label="加急下线" :value="4"></el-option> -->
                        </el-select>
                    </el-form-item>

                    <el-form-item label="" class="upload-file">
                        <p>文件</p>
                    </el-form-item>
                    <el-form-item class="upload-excel" label="Excel歌曲列表:" prop="jobCode">
                        <el-input
                            class=""
                            style="width:200px"
                            placeholder="显示上传的文件名"
                            clearable
                            disabled
                            v-model="form.jobCode"
                        ></el-input>
                        <img src="" alt="" />
                        <a href="javascript:void(0)" class="btn">
                            下载
                            <input type="file" id="file" name="file" @click.prevent="downExcel" />
                        </a>
                    </el-form-item>

                    <el-form-item class="upload-excel" label="版权证明zip：">
                        <el-input
                            class=""
                            style="width:200px"
                            placeholder="显示上传的文件名"
                            clearable
                            v-model="form.copyrightName"
                            disabled
                        ></el-input>
                        <img src="" alt="" />
                        <a href="javascript:void(0)" class="btn">
                            下载
                            <input type="file" id="file" name="file" @click.prevent="downCp" />
                        </a>
                    </el-form-item>

                    <el-form-item label="" class="upload-file">
                        <p>审核结果</p>
                    </el-form-item>
                    <br />
                    <!-- <el-form-item class="upload-excel" label="审核Excel表格反馈:" prop="feedback">
                        <el-input class="" style="width:200px" placeholder="显示上传的文件名" clearable v-model="form.excel"></el-input>
                        <img src="" alt="" />
                        <a href="javascript:void(0)" class="btn">
                            上传
                            <input type="file" id="file" name="file" @change="uploadFile" />
                        </a>
                    </el-form-item> -->

                    <el-form-item class="upload-excel" label="审核结果" prop="auditFlag">
                        <el-select v-model="form.auditFlag" placeholder="" :clearable="true" class="handle-select mr10">
                            <el-option
                                v-for="(item, index) in copyrightStatus"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            <!-- <el-option key="1" label="不通过" :value="1"></el-option> -->
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item class="upload-excel" label="下一步事项：" prop="excel">
                        <el-select v-model="form.status" placeholder="" :clearable="true" class="handle-select mr10">
                            <el-option key="0" label="提交物料至FTP" :value="0"></el-option>
                            <el-option key="1" label="请按照”审核结果“修改后重新提交申请" :value="1"></el-option>
                            <el-option key="2" label="请按照”歌曲列表“上传歌曲版权及原始版权证明" :value="2"></el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item class="upload-excel" label="备注:">
                        <el-input class="" style="width:200px" placeholder="填写备注" clearable v-model="form.remark"></el-input>
                    </el-form-item>
                </el-form>
                <el-button class="closeBtn" type="info" @click="handleCancel">取消</el-button>
                <el-button
                    :disabled="
                        checkRequire({
                            applyType: form.applyType,
                            auditFlag: form.auditFlag
                        })
                    "
                    class="submit"
                    @click="handleSubmit"
                    type="primary"
                    >提交</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import { copyrightStatus } from '@/components/common';
import NProgress from 'nprogress';
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'AuditDetails',
    data() {
        return {
            // form: {
            //     name: '',
            //     applyType: '',
            //     jobCode: '',
            //     copyrightName: '',
            //     auditFlag: '',
            //     remark: ''
            // },
            rules: {
                applyType: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
                jobCode: [{ required: true, message: '请选择上传的版权证明', trigger: 'blur' }],
                // copyrightName: [{ required: true, message: '请选择上传的版权证明', trigger: 'blur' }],
                auditFlag: [{ required: true, message: '请选择审核状态', trigger: 'change' }]
                //
                // feedback: [{ required: true, message: '请选择申请类型', trigger: 'blur' }]
            },
            copyrightStatus
        };
    },
    destroyed() {
        if (!this.tagsList.some(item => item.name === 'AuditDetails') && !this.tagsList.some(item => item.name === 'AuditEdit')) {
            localStorage.removeItem('id_warehouse');
        } else {
            //  什么都不做
        }
    },
    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(a, b) {
                console.log(a, b);
                if (a.name === 'AuditDetails' && Object.keys(this.form).length === 0) {
                    this.getDataById(this.$route.query.id);
                }
            }
        }
    },
    computed: {
        ...mapGetters({
            form: 'getAuditDetailsForm',
            tagsList: 'tagsList'
        })
    },
    methods: {
        ...mapMutations({
            SET_AUDIT_DETAILS_FORM: 'SET_AUDIT_DETAILS_FORM'
        }),
        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        handleCancel() {
            this.$router.replace({
                path: '/warehouse_/manage'
            });
        },
        handleSubmit() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.submit();
                })
                .catch(() => {});
        },
        async submit() {
            try {
                NProgress.start();
                // let url = '/job/validResource';
                let url = '/job/audit';
                var formdata = new FormData();
                formdata.append('jobCode', this.form.jobCode);
                formdata.append('auditFlag', this.form.auditFlag);
                if (this.form.remark) {
                    formdata.append('remark', this.form.remark);
                } else {
                    formdata.append('remark', '');
                }

                let { data: res } = await this.$http[1].post(url, formdata, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        name: encodeURIComponent(localStorage.getItem('ms_username'))
                    }
                });
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                // this.$router.replace({
                //     path: '/warehouse_/manage'
                // });
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        downExcel() {
            this.getKey('/job/territory', this.form.jobCode, 'application/vnd.ms-excel', '.xls');
        },
        downCp() {
            this.getKey('/job/musicRight', this.form.copyrightName, 'application/x-zip-compressed', '.zip');
        },
        async getKey(url, filename, contentType, suffix) {
            try {
                let { data: res } = await this.$http[1].post(url, `jobCode=${this.form.jobCode}`, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });
                console.log(res);
                this.down(res.data, filename, contentType, suffix);
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        async down(key, filename, contentType, suffix) {
            try {
                NProgress.start();
                let { data: res } = await this.$http[1].get(`/download/${key}`, {
                    headers: {},
                    params: this.$removeField({
                        fileType: suffix
                    }),
                    responseType: 'blob'
                });

                let link = document.createElement('a');
                let blob = new Blob([res], { type: contentType });
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', `${filename ? filename : this.form.jobCode}${suffix}`);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                NProgress.done();
                // let url = `${process.env.VUE_APP_BASE_API2}/download/${key}?fileType=${suffix}`;
                // fetch(url, {
                //     method: 'GET',
                //     headers: {
                //         // 'Content-Type': 'application/x-www-form-urlencoded'
                //     }
                //     // params: {
                //     //     fileType: suffix
                //     // }
                // })
                //     .then(res => {
                //         return res.text();
                //     })
                //     .then(res => {
                //         console.log(res);
                //         // console.log(res);
                //         // 导出excel表格
                //         let link = document.createElement('a');
                //         let blob = new Blob([res], { type: contentType });
                //         link.style.display = 'none';
                //         link.href = URL.createObjectURL(blob);
                //         link.setAttribute('download', `${filename ? filename : this.form.jobCode}${suffix}`);
                //         document.body.appendChild(link);
                //         link.click();
                //         document.body.removeChild(link);
                //         NProgress.done();
                //     })
                //     .catch(err => {
                //         NProgress.done();
                //         console.dir(err);
                //     });
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        async getDataById(checkId) {
            try {
                NProgress.start();
                let url = '/job/detailed';
                let { data: res } = await this.$http[1].get(url, {
                    params: this.$removeField({
                        id: checkId
                    })
                });
                console.log('审核详情', res);
                // 解构
                let { name, applyType, jobCode, copyrightName, remark } = res.data;
                // 中间处理
                applyType = this.$getNumber(applyType);
                // auditFlag = this.$getNumber(auditFlag);
                // 赋值
                // this.form = {
                //     name,
                //     applyType,
                //     jobCode,
                //     copyrightName,
                //     // auditFlag: '',
                //     remark,
                //     jobCode
                // };
                this.SET_AUDIT_DETAILS_FORM({
                    name,
                    applyType,
                    jobCode,
                    copyrightName,
                    // auditFlag: '',
                    remark,
                    jobCode
                });
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        }
        // uploadFile(file) {
        //     console.log(file);
        // }
    }
};
</script>

<style lang="scss">
#audit_details {
    .container {
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            // width: 300px;
            width: 100%;
            display: inline-block;
        }
        overflow: hidden;
        .wrapper {
            width: 500px;
            box-shadow: 1px 1px 10px 2px #ccc;
            height: 650px;
            margin-bottom: 20px;
            position: relative;
            // float: left;
            .closeBtn {
                margin-left: 15px;
                width: 80px;
                position: absolute;
                left: 10px;
                bottom: 15px;
            }
            .submit {
                margin-left: 15px;
                width: 80px;
                position: absolute;
                left: 100px;
                bottom: 15px;
            }
            .title {
                height: 40px;
                line-height: 40px;
                margin-bottom: 40px;
                border-bottom: 1px solid #ccc;
                color: #666;
                padding-left: 5%;
                box-sizing: border-box;
                font-size: 14px;
                font-weight: bold;
            }

            .v-form-item {
                margin-right: 0;
                margin-left: 15px;
                width: calc(100% - 50px);

                .el-form-item__label {
                    width: 100px;
                    text-align: right;
                    padding-right: 10px;
                    box-sizing: border-box;
                }
                .el-form-item__content {
                    width: calc(100% - 100px);
                    .el-select {
                        width: 100%;
                    }
                }
            }
            .upload-file {
                // margin-top: 50px;
                .el-form-item__content {
                    margin-left: 35px !important;
                    p {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        background-color: rgba(0, 0, 0, 0.1);
                        text-align: center;
                        color: #333;
                    }
                }
            }

            .upload-excel {
                padding-left: 10px;
                box-sizing: border-box;

                .el-form-item__label {
                    width: 150px;
                    text-align: right;
                    font-size: 14px;
                    color: #333;
                }
            }
            .btn {
                position: relative;
                display: inline-block;
                text-align: center;
                color: #fff;
                text-decoration: none;
                width: 80px;
                height: 32px;
                line-height: 32px;
                background: #409eff;
                border-radius: 3px;
                font-size: 12px;
                vertical-align: middle;
                margin-left: 25px;
            }
            input[name='file'] {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
            }
        }

        .red {
            color: #ff0000;
        }
        .mr10 {
            margin-right: 10px;
        }
        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }
    }
}
</style>
